import React from 'react';
import { Layout, Menu, Avatar, Dropdown, Typography, Image, Flex } from 'antd';
import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { Link } from 'react-router-dom';
import logo from './logo.png'

const { Header } = Layout;
const { Text } = Typography;

// 自定义钩子
function useHeaderActions() {
  const [visible, setVisible] = useState(false);

  const showDropdown = () => {
    setVisible(true);
  };

  const hideDropdown = () => {
    setVisible(false);
  };

  const handleLogout = () => {
    // 退出登录逻辑
    console.log('Logout');
    hideDropdown();
  };

  return { visible, showDropdown, hideDropdown, handleLogout };
}

const HeaderComponent: React.FC = () => {
  const { visible, showDropdown, hideDropdown, handleLogout } = useHeaderActions();

  const menu = (
    <Menu onClick={hideDropdown} selectedKeys={[]}>
      <Menu.Item key="1" icon={<LogoutOutlined />} onClick={handleLogout}>
        <Link to='/'>退出登录</Link>
      </Menu.Item>
    </Menu>
  );

  return (
    <Header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div style={{ marginLeft: 16 }}>
        <Flex justify={'center'} align='center'>
          <Image
            style={{ width: '100%', height: 'auto' }}
            src={logo}
          />
          <Text style={{ color: 'white', fontSize: 24, marginLeft: 24 }}>医疗器械检测实验室项目开展信息系统</Text>
        </Flex>
      </div>
      <div style={{ marginRight: 16 }}>
        <Dropdown
          overlay={menu}
          trigger={['click']}
          visible={visible}
          onVisibleChange={(val) => (val ? showDropdown() : hideDropdown())}
        >
          <Avatar size="large" icon={<UserOutlined />} style={{ backgroundColor: '#87d068' }} />
        </Dropdown>
      </div>
    </Header>
  );
};

export default HeaderComponent;